<template>
    <div class="confiscationIndex">
        <navAndBanner></navAndBanner>
        <div class="img3">

        </div>
        <div style="height:1px;border-top:3px solid #7ecef4;width:76.4%;margin:0 auto;"></div>
        <div class="detailsData">
            <div class="showData">
                <div class="liquorCard">
                    <p>酒 卡 号&nbsp;</p>
                    <p v-text="callBackData.YSDH"></p>
                </div>
                <div class="liquorCard">
                    <p>业务日期</p>
                    <p v-text="callBackData.LRSJ"></p>
                </div>
                <div class="liquorCard">
                    <p>状 &nbsp;&nbsp;&nbsp;&nbsp;态</p>
                    <p v-text="callBackData.STATE"></p>
                </div>
            </div>
            <div class="showData">
                <div class="liquorCard">
                    <p>客户姓名</p>
                    <p v-text="callBackData.KHMC"></p>
                </div>
                <div class="liquorCard">
                    <p>联系电话</p>
                    <p v-text="callBackData.KHDH"></p>
                </div>
                <div class="liquorCard">
                    <p>会 员 号</p>
                    <p></p>
                </div>
            </div>
            <div class="bzData">
                <p>备 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</p>
                <p></p>
            </div>
        </div>
        <main class="confiscationQueryContent">
            <template>
                <Table border :columns="columns7" :stripe="true" :data="data6" height="800"></Table>
            </template>
            <p class="cardsName">建卡人：李某某</p>
        </main>

        <div class="sumBtn">
            <div>
                <template>
                    <Button type="info" :long="true" @click="examineBtn()" :loading="loading">审核酒卡</Button>
                </template>
            </div>
        </div>


        <div class="footer">
            <p>kqmts &copy 2015-2017 All Rights Reserved</p>
            <p>川ICP备16020686号</p>
        </div>
    </div>
</template>

<script>
    import navAndBanner from '../navAndBanner.vue'
    export default {
        components:{
                navAndBanner
            },
        name: "confiscationIndex",
        data() {
            return {
                columns7: [
                    {
                        title: '序列',
                        key: 'index',

                    },
                    {
                        title: '商品名称',
                        key: 'SPMC'
                    },
                    {
                        title: '商品编码',
                        key: 'SPBM'
                    },
                    {
                        title: '数量',
                        key: 'SL'
                    }
                    // {
                    //     title: '录入时间',
                    //     key: 'entryTime'
                    // },
                    // {
                    //     title: '类型',
                    //     key: 'type'
                    // }
                ],
                data6: [],
                callBackData: "",
                loading: false,
                 userInfo:{}
            }
        },
        mounted() {
            this.userInfo = JSON.parse(sessionStorage.userinfo).data
            let _this = this
            this.$http.post(`${this.URL}/api/ws/getConfiscationDetails`,
                { "token": this.userInfo.token, "DH": this.$route.query.DH }
            ).then(function (res) {
                console.log(res)
                _this.data6 = res.data.data.list
                _this.callBackData = res.data.data
                for (var i = 0; i < _this.data6.length; i++) {
                    _this.data6[i]["index"] = i + 1
                }
            })
        },
        methods: {
            examineBtn() {
                this.loading = true
                let _this = this
                this.$http.post(`${this.URL}/api/ws/confiscationExamine`,
                    { "token": this.userInfo.token, "DH": this.$route.query.DH }
                ).then(function (res) {
                    _this.loading = false
                    if (res.data.data == "操作成功") {
                        _this.$router.push({
                            path: "/chonggongFunc/confiscationquery"
                        })
                    }

                })
            }
        }
    }

</script>

<style>
    .navAndBanner {
        background: linear-gradient(30deg, #b490ca, #5ebbe7);
        width: 100%;
        height: 120px;
        vertical-align: middle;
        padding-top: 40px
    }

    .img3 {
        background: url(../../assets/img/confiscationTitle3.png);
        width: 800px;
        height: 85px;
        margin: 0 auto;
        margin-top: 90px;
        margin-bottom: 80px;
        background-repeat: no-repeat;
    }

    a {
        text-decoration: none;
    }

    nav ul li {
        display: inline-block;
        vertical-align: middle;
        margin-right: 5%
    }

    nav ul li a {
        font-size: 24px;
        color: #999999;
    }

    nav ul li:first-child {
        margin-left: 13%;
        margin-right: 15%;
    }

    nav ul li:last-child {
        margin-top: 12px;
        float: right
    }
    /*展示的信息 */

    .detailsData {
        width: 70.8vw;
        margin: auto;
        border-bottom: 1px solid #d2d2d2;
        padding-bottom: 2vw;
    }

    .showData {
        margin-top: 35px;
        display: flex;
        margin-left: 1.5vw;
    }

    .liquorCard {
        display: flex;
    }

    .liquorCard:not(:last-child) {
        margin-right: 6.1vw;
    }

    .liquorCard>p:nth-child(1) {
        margin-top: .7vw;
        font-size: .8vw;
        font-weight: 600;
    }

    .liquorCard>p:nth-child(2) {
        margin-left: 1vw;
        width: 14vw;
        height: 2.8vw;
        background: #eee;
        border-radius: 20px;
        text-align: center;
        line-height: 2.8vw;
    }

    .bzData {
        margin-top: 35px;
        font-size: .8vw;
        font-weight: 600;
        display: flex;
        margin-left: 1.5vw;
    }

    .bzData>p:nth-child(1) {
        margin-top: 1.7vw;
    }


    .bzData>p:nth-child(2) {
        width: 63vw;
        height: 5.3vw;
        background: #eee;
        border-radius: 20px;
        margin-left: 1vw;
        text-indent: 1vw;
    }
    /*内容*/

    .confiscationQueryContent {
        width: 70.8vw;
        margin: auto;
        margin-top: 2.6vw;
        height: auto;
    }

    .cardsName {
        margin-top: 20px;
        color: #999;
        float: right;
    }
    /*按钮*/

    .sumBtn>div:nth-child(1) {
        width: 7.8vw;
    }

    .sumBtn>div {
        width: 70.8vw;
        margin: auto;
        margin-top: 6.1vw;
    }
    /*尾部*/

    .footer {
        height: 125px;
        width: 100%;
        background: linear-gradient(30deg, #b490ca, #5ebbe7);
        text-align: center;
        vertical-align: middle;
        color: white;
        padding-top: 50px;
        margin-top: 125px
    }
</style>